import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import {  Button, Table, Form, Input, Popconfirm, DatePicker } from 'antd';
const FormItem = Form.Item;
const { RangePicker } = DatePicker;

import AddRegistration from '../../components/visitor/AddRegistration';
import EntryModal from '../../components/visitor/EntryModal';
import LeaveModal from '../../components/visitor/LeaveModal';

function Registration({ dispatch, visitor, form, loading }) {

  const { getFieldDecorator, getFieldsValue } = form;

  const { modalVisible, modalType, newKey, itemId, eModalVisible, lModalVisible } = visitor

  const columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 50,
  },{
    title: '证件号',
    dataIndex: 'idCard',
    key: 'idCard',
    width: 100,
  },{
      title: '证件类型',
      dataIndex: 'cardType',
      key: 'cardType',
      width: 60,
  },{
      title: '工作单位',
      dataIndex: 'org',
      key: 'org',
      width: 120,
  }, {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      width: 60,
  }, {
    title: '事由',
    dataIndex: 'reason',
    key: 'reason',
    width: 180,
  }, {
    title: '预计（小时）',
    dataIndex: 'expected',
    key: 'expected',
    width: 90,
  }, {
    title: '进入时间',
    dataIndex: 'entryTime',
    key: 'entryTime',
    width: 80,
  }, {
      title: '离开时间',
      dataIndex: 'leaveTime',
      key: 'leaveTime',
      width: 80,
  }, {
      title: '操作',
      key: 'operation',
      width: 60,
      render: (text, record) => {
          if (record.state == 1) {
                  return <span><a onClick={onEntry.bind(null, record.id_)}>进入</a></span>;
          };
          if (record.state == 2) {
                  return <span><a onClick={onLeave.bind(null, record.id_)}>离开</a></span>;
          };
      },
  }];

  const pagination = {
    current:visitor.current,
    pageSize:visitor.currentSize,
    total: visitor.total,
    showSizeChanger: true,
    showTotal: (total => '共' + visitor.total + '条'),
    onShowSizeChange(current, size) {
    dispatch({
        type: 'visitor/qryVisitorByParams',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
    });
    },
    onChange(current) {
    dispatch({
        type: 'visitor/qryVisitorByParams',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':visitor.currentSize} },
    });
    },
  };

  const submitHandle = () => {
    dispatch({
        type: 'visitor/qryVisitorByParams',
        payload: { ...getFieldsValue()},
    });
  }

  const addHandler = () => {
    dispatch({
      type: 'visitor/showModal',
      payload: {
          modalType: 'create',
      },
    })
  }

  const onEntry = (record) => {
    dispatch({
         type: 'visitor/showEModal',
         payload: record,
    })
  }

  const onLeave = (record) => {
    dispatch({
      type: 'visitor/showLModal',
      payload: record,
    })
  }

  function handleClear(){
    form.resetFields();
  }
  
  const modalProps = {
    visible: modalVisible,
    type: modalType,
    dispatch:dispatch,
    maskClosable: false,
    confirmLoading: loading,
    title: `人员登记`,
    wrapClassName: 'vertical-center-modal',
    newKey : newKey,
    onOk (data) {
      dispatch({
        type: `visitor/${modalType}`,
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'visitor/hideModal',
      })
    },
  }

  const eModalProps = {
    itemId: itemId,
    visible: eModalVisible,
    dispatch:dispatch,
    maskClosable: false,
    confirmLoading: loading,
    title: `人员登记-进入机房`,
    wrapClassName: 'vertical-center-modal',
    newKey : newKey,
    onOk (data) {
      dispatch({
        type: 'visitor/entry',
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'visitor/hideEModal',
      })
    },
  }

  const lModalProps = {
    itemId: itemId,
    visible: lModalVisible,
    dispatch:dispatch,
    maskClosable: false,
    confirmLoading: loading,
    title: `人员登记-离开机房`,
    wrapClassName: 'vertical-center-modal',
    newKey : newKey,
    onOk (data) {
      dispatch({
        type: 'visitor/leave',
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'visitor/hideLModal',
      })
    },
  }



  return (
    <div style={{width:'auto',backgroundColor:'#fff'}} >
      <div style={{}}>
        <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
          <Form layout="inline" >
            <FormItem>
              {getFieldDecorator('name',{initialValue:''})(
                <Input type="text" placeholder="姓名" style={{ width:'100px', marginRight: '3%' }} />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('idCard',{initialValue:''})(
                <Input type="text" placeholder="证件号" style={{ width:'150px', marginRight: '3%' }} />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('org',{initialValue:''})(
                <Input type="text" placeholder="工作单位" style={{ width:'150px', marginRight: '3%' }} />
              )}
            </FormItem>
            <FormItem label="进入时间">
              {getFieldDecorator('entryTime')(
                <RangePicker
                  showTime={{ format: 'HH:mm' }}
                  format="YYYY-MM-DD HH:mm"
                  placeholder={['开始时间', '结束时间']}
                  style={{ width:'232px' }}
                />
              )}
            </FormItem>
            <FormItem label="离开时间">
              {getFieldDecorator('leaveTime')(
                <RangePicker
                  showTime={{ format: 'HH:mm' }}
                  format="YYYY-MM-DD HH:mm"
                  placeholder={['开始时间', '结束时间']}
                  style={{ width:'232px' }}
                />
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
            </FormItem>
            <FormItem>
              <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
            </FormItem>
            <div style={{marginTop:'-40px',textAlign:'right',paddingRight:'10px'}}>
              <FormItem>
                <Button type="primary" size='large' onClick={addHandler}>人员登记</Button>
              </FormItem>
            </div>
         </Form>
        </div>
        <div style={{width:'100%',padding:"30px 20px",}}>
          <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={visitor.visitorList}  pagination={pagination}
          />
        </div>
      </div>
      <AddRegistration {...modalProps} />
      <EntryModal {...eModalProps} />
      <LeaveModal {...lModalProps} />
    </div>
  );

}

function mapStateToProps(state) {
    return { visitor : state.visitor,loading:state.loading.models.visitor};
}

Registration = Form.create()(Registration);

export default connect(mapStateToProps)(Registration);
